<template>
  <ul class="subs">
    <li v-for="item in promotional" class="subs-item">
      <a :href="item.href" class="sub-item-href" target="_blank">
        <img class="subs-img" :src="item.src" alt=""/>
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Promotional",
  data() {
    return {
      promotional: [],
    }
  },
  created() {
    this.getPromotional()
  },
  methods: {
    async getPromotional() {
      const {data: res} = await this.$http.get('promotional')
      this.promotional = res.promotional
    },
  }
}
</script>

<style scoped lang="less">
.subs {
  display: flex;
  width: 100%;
  justify-content: space-between;
  
  .subs-item {
    width: 316px;
    height: 170px;
    
    .sub-item-href {
      display: inline-block;
      width: 316px;
      height: 170px;
      
      .subs-img {
        width: 316px;
        height: 170px;
      }
    }
  }
}
</style>
